<!-- HistoryPage.vue -->
<script setup>
import UserLayout from "./UserLayout.vue";
import {ref} from 'vue';
import {getViewsPostService} from "@/api/postInfo.js";
import {humanizeTime} from "../../utiles/format.js";

const posts = ref([
  {
    id: 1,
    author: {
      id: 1,
      avatar: '',
      name: '',
      introduced: ''
    },
    title: "",
    content: "",
    cover: '',
    tags: [],
    likeCount: 0,
  },
])

const getPosts = async () => {
  const res = await getViewsPostService()
  posts.value = res.data.data
}
getPosts()
</script>

<template>
  <UserLayout>
    <!-- 浏览记录列表 -->
    <div class="history-list">
      <el-card
        v-for="record in posts"
        :key="record.id"
        shadow="hover"
        class="history-item"
      >
        <div class="item-content">
          <!-- 作者信息 -->
          <div class="author-info">
            <el-avatar :size="40" :src="record.author.avatar"/>
            <div class="author-details">
              <span class="author-name">{{ record.author.nickname }}</span>
              <div v-if="record.createTime">
                <span class="view-time">{{ humanizeTime(record.createTime) }}</span>
              </div>
            </div>
          </div>

          <!-- 内容区域 -->
          <div class="content-wrapper">
            <h4 class="title">{{ record.title }}</h4>
            <p class="content" v-html="record.content"></p>
          </div>

        </div>
      </el-card>
    </div>
  </UserLayout>
</template>

<style scoped lang="scss">
.history-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.history-item {
  :deep(.el-card__body) {
    padding: 16px;
  }
}

.item-content {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.author-info {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;

  .author-details {
    margin-top: 8px;
    text-align: center;

    .author-name {
      font-size: 0.9em;
      color: #666;
      display: block;
    }

    .view-time {
      font-size: 0.8em;
      color: #999;
      display: block;
      margin-top: 4px;
    }
  }
}

.content-wrapper {
  flex: 1;
  min-width: 0;

  .title {
    margin: 0 0 8px;
    font-size: 16px;
    color: #333;
  }

  .content {
    margin: 0;
    color: #666;
    font-size: 0.9em;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .content > * {
    display: inline; /* 块级标签转为行内 */
    margin: 0; /* 清除默认外边距 */
  }

  :deep(.content) img {
    display: none;
  }
}

.action-buttons {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-left: auto;
}
</style>
